import React, { useState } from 'react'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import { useNavigate, useLocation } from 'react-router-dom'




export default function Tabbars() {

    /* 底部导航栏数据 */
    const tabbarlist = [
        { title: '首页', icon: <HomeO />, path: '/home' },
        { title: '我的', icon: <FriendsO />, path: '/my' }
    ]

    let location = useLocation()
    let navigate = useNavigate()
    let [change, setChange] = useState(location.pathname)


    return (
        <div>
            {/* 底部导航栏 */}
            <Tabbar value={change} onChange={(e:any)=>{
                navigate(e)
                setChange(e)
            }}>
                {
                    tabbarlist.map(item => {
                        return <Tabbar.Item icon={item.icon} name={item.path}>
                            {item.title}
                        </Tabbar.Item>
                    })
                }

            </Tabbar>
        </div>
    )
}
